<template>
    <div>
        <div class="editorContent" elevation="4">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
        </div>
        <span v-show="isShowError">请将信息填写完整</span>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p><br></p>',
            toolbarConfig: {
                toolbarKeys:[
                    'headerSelect',
                    'fontSize',
                    'fontFamily',
                    'lineHeight',
                    '|',
                    'blockquote',
                    'bold',
                    'through',
                    'underline',
                    'italic',
                    'color',
                    'bgColor',
                    'clearStyle',
                    '|',
                    'bulletedList',
                    'numberedList',
                    'todo',
                    'justifyLeft',
                    'justifyRight',
                    'justifyCenter',
                    'justifyJustify',
                    'indent',
                    'divider',
                    'emotion',
                    '|',
                    'insertTable',
                    'codeBlock',
                    'insertLink',
                     {
                        "key": "group-image",
                        "title": "图片",
                        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
                        "menuKeys": [
                            "insertImage",
                            "uploadImage"
                        ]
                    },
                    'undo',
                    'redo',
                    '|',
                ]
            },
            editorConfig: { 
                placeholder: '请输入内容...' ,
                MENU_CONF: {
                    uploadImage:{
                        server:process.env.VUE_APP_SERVER_URL+'/upload/editorFile',
                        fieldName:'up'
                    }
                }
            },
            mode: 'simple', // or 'simple'
            isShowError:false,
        }
    },
    watch:{
        html(newValue,oldValue){
            if(newValue=='<p><br></p>'){
                this.isShowError = true
                // this.$bus.$emit('chatDetail',false)
            }else{
                this.isShowError = false
                // this.$bus.$emit('chatDetail',true)
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {

    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
span{
    color: red;
    font-size: 10px;
    margin-left: 10px;
}
.editorContent{
    border: 1px solid rgb(238, 238, 238);
}
</style>
